<!--
 * @description: 
 * @LastEditTime: 2024-04-09 14:11:40
-->
<template>
  <view class="mail-page">
    <u-list @scrolltolower="scrolltolower">
      <u-list-item v-for="(item, index) in listData" :key="index">
        <u-cell center isLink @click="goDetail(item)">
          <!-- <view class="mail-icon" slot="icon">
            <u-avatar
              shape="circle"
              size="48rpx"
              :src="require('@/static/user/notice.png')"
            ></u-avatar>
          </view> -->
          <view class="mail-title line-1" slot="title">
            {{ item.title }}
          </view>

          <text
            slot="label"
            class="line-1"
            style="font-size: 22rpx; color: #999; width: 500rpx; margin-top: 4rpx"
          >
            {{ item.createTime }}
          </text>
        </u-cell>
      </u-list-item>
      <view v-if="listData.length === 0" style="text-align: center; padding-top: 50rpx">
        暂无数据
      </view>
    </u-list>
  </view>
</template>

<script>
export default {
  data() {
    return {
      listData: [],
      pageNo: 1,
      pageSize: 20,
      total: 0,
    }
  },
  onLoad() {},
  onShow() {
    this.getList()
  },
  async onPullDownRefresh() {
    this.listData = []
    this.pageNo = 1
    await this.getList()
    uni.stopPullDownRefresh()
  },
  methods: {
    scrolltolower() {
      let totalPageNo = Math.ceil(this.total / this.pageSize)
      if (this.pageNo < totalPageNo) {
        ++this.pageNo
        this.getList()
      }
    },
    getList() {
      return new Promise((resolve) => {
        this.$request('/notice/noticePage', {
          pageNo: this.pageNo,
          pageSize: this.pageSize,
        }).then((res) => {
          if (this.pageNo === 1) this.listData = []
          this.listData = [...this.listData, ...res.result.records]
          this.total = res.result.total
          resolve(res.result)
        })
      })
    },
    goDetail(val) {
      this.$routeUtils.navigateTo({
        url: `/pages/index/noticeDetail?id=${val.id}`,
      })
    },
  },
}
</script>

<style lang="scss" scoped>
.mail-page {
  background-color: #fff;
  .mail-icon {
    position: relative;
    width: 80rpx;
    height: 80rpx;
    margin-right: 10rpx;
    background-color: #eee;
    border-radius: 14rpx;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .mail-title {
    width: 620rpx;
  }
}
</style>
